<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="Sender"
      :rules="SenderRule"
      label-width="auto"
      ref="SenderForm"
    >
      <el-form-item label="发件人" prop="Name">
        <el-input v-model="Sender.Name" placeholder="发件人"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="Tel">
        <el-input v-model="Sender.Tel" placeholder="手机"></el-input>
      </el-form-item>
      <el-form-item label="区域" prop="Region">
        <el-cascader
          v-model="Sender.Region"
          ref="SenderRegion"
          :options="options"
          @change="(e)=> handleChange(0)"></el-cascader>
      </el-form-item>
      <el-form-item label="地址" prop="Address">
        <el-input v-model="Sender.Address" placeholder="地址"></el-input>
      </el-form-item>
    </el-form>
    <el-form  :model="Receiver"
              :rules="ReceiverRule"
              ref="ReceiverForm"
              label-width="auto"
    >
      <el-form-item label="收货人" prop="Name">
        <el-input v-model="Receiver.Name" placeholder="收货人"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="Tel">
        <el-input v-model="Receiver.Tel" placeholder="手机"></el-input>
      </el-form-item>
      <el-form-item label="区域" prop="Region">
        <el-cascader
          v-model="Receiver.Region"
          :options="options"
          ref="ReceiverRegion"
          @change="handleChange(1)"></el-cascader>
      </el-form-item>
      <el-form-item label="地址" prop="Address">
        <el-input v-model="Receiver.Address" placeholder="地址"></el-input>
      </el-form-item>
    </el-form>
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="auto"
    >
      <el-form-item label="订单号" prop="orderSn">
        <el-input v-model="dataForm.orderSn" readonly placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item label="物流公司" prop="ShipperCode">
        <el-select v-model="dataForm.ShipperCode" placeholder="物流公司">
          <el-option v-for="item in expressList" :key="item.name" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物流单号" prop="LogisticCode">
        <el-input v-model="dataForm.LogisticCode" placeholder="物流单号"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
        <el-button type="primary" @click="dataFormSubmit()">发货</el-button>
      </span>
  </el-dialog>
</template>

<script>
import provinceData from './city-data/province.js';
import cityData from './city-data/city.js';
import areaData from './city-data/area.js';
export default {
  data() {
    return {
      visible: false,
      orderStatus: {
        12: "待付款",
        1: "已完成",
        2: "待发货",
        3: "待收货",
        4: "已取消",
      },

      options:[

      ],
      dataForm: {
        id: 0,
        orderSn: "",
        orderSnSubmit: "",
        uid: "",
        orderStatus: "",
        expressName: "",
        consignee: "",
        address: "",
        submitTime: ""
      },
      expressList:[{
        name:"中通快递",
        code:"ZTO"
      },{
        name:"申通快递",
        code:"STO"
      },{
        name:"圆通速递",
        code:"YTO"
      },{
        name:"邮政快递包裹",
        code:"YZPY"
      },{
        name:"EMS",
        code:"EMS"
      },{
        name:"顺丰速运",
        code:"SF"
      },{
        name:"韵达速递",
        code:"YD"
      },{
        name:"天天快递",
        code:"HHTT"
      },{
        name:"德邦快递",
        code:"DBL"
      },{
        name:"宅急送",
        code:"ZJS"
      },{
        name:"其他",
        code:"qt"
      }],
      Sender: {
        Name: "",
        Tel: "",
        Address: "",
        Region: ""
      },
      Receiver: {
        Name: "",
        Tel: "",
        Address: "",
        Region: ""
      },
      dataRule: {
        uid: [{ required: true, message: "用户id不能为空", trigger: "blur" }],
        ShipperCode: [
          { required: true, message: "物流公司不能为空", trigger: "blur" }
        ],
        LogisticCode: [
          { required: true, message: "物流单号不能为空", trigger: "blur" }
        ]
      },
      SenderRule:{
        Name: [
          { required: true, message: "发件人不能为空", trigger: "blur" }
        ],
        Address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        Tel: [{ required: true, message: "手机不能为空", trigger: "blur" }],
        Region: [{ required: true, message: "区域不能为空", trigger: "blur" }],
      },
      ReceiverRule:{
        Name: [
          { required: true, message: "发件人不能为空", trigger: "blur" }
        ],
        Address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        Tel: [{ required: true, message: "手机不能为空", trigger: "blur" }],
        Region: [{ required: true, message: "区域不能为空", trigger: "blur" }]
     }

    };
  },
  methods: {
    handleChange(val) {
      if(val == 0){
        const sender = this.$refs["SenderRegion"].getCheckedNodes()[0];
        this.Sender.ProvinceName = sender.parent.parent.label;
        this.Sender.CityName = sender.parent.label;
        this.Sender.ExpAreaName = sender.label;
      }
      if (val == 1) {
        console.log(this.Receiver.Region)
        const receiver = this.$refs["ReceiverRegion"].getCheckedNodes()[0];
        this.Receiver.ProvinceName = receiver.parent.parent.label;
        this.Receiver.CityName = receiver.parent.label;
        this.Receiver.ExpAreaName = receiver.label;
      }
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.getRegions();
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/admin/order/info/${this.dataForm.id}`),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            console.log(data.data);
            if (data && data.code === 0) {
              this.dataForm = data.data;
              this.Receiver.Address = data.data.address.address;
              this.Receiver.Name = data.data.address.consignee;
              this.Receiver.Tel = data.data.address.mobile;
              this.Receiver.Region = [data.data.address.provinceId, data.data.address.cityId, data.data.address.areaId]
            }
          });
        }
      });
    },
    getRegions(){
      this.options = provinceData.map((p,i)=>{
        p.children = cityData[i].map((c,k)=>{
          c.children = areaData[i][k];
          return c;
        });
        return p;
      });
    },
    // 表单提交
    async dataFormSubmit() {
      await this.$refs["SenderForm"].validate();
      await this.$refs["ReceiverForm"].validate();
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          const compay = this.expressList.filter(f => this.dataForm.ShipperCode == f.code);
          let companyName = "";
          if (compay.length >0 )
            companyName = compay[0].name;
          this.$http({
            url: this.$http.adornUrl(
              `/admin/order/${this.dataForm.id}/shipped`
            ),
            method: "post",
            data: this.$http.adornData({
              ShipperCode: this.dataForm.ShipperCode,
              LogisticCode: this.dataForm.LogisticCode,
              Company: companyName,
              OrderCode: this.dataForm.orderSn,
              Sender: this.Sender,
              Receiver: this.Receiver
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
